<template>
  <div class="passenger-station-map">
    <div class="map-container-box" id="map-container"></div>
    <div :id="'dot-' + index" v-for="index in 3" :key="index"></div>
    <station-pop class="passenger-station-dialog" :station-pop-data="stationData"></station-pop>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import stationPop from '../../components/stationPop/index.vue'
// @ts-ignore
import PassengerStation from '../../../basic/PassengerStation.js'
import EventBus from '../../../../../utils/eventBus'
@Component({
  name: 'passenger-station-map',
  components: {
    stationPop
  }
})
export default class PassengerStationMap extends Vue {
  private queryList: any = []

  private map: any

  private stationData = {}

  mounted () {
    this.map = new PassengerStation(this)
    this.map.initPassengerStation()
    // @ts-ignore
    EventBus.$on('queryList', (list) => {
      this.queryList = []
      console.log('recv: ', list)
      this.queryList = list
      this.map.initPassengerStation()
    })
    EventBus.$on('chooseStation', (e: any) => {
      this.map.setActiveMarker(e)
    })
    EventBus.$on('resetMarker', () => {
      this.map.resetMarker()
    })
  }
  beforeDestroy () {
    console.log('移除 EventBus')
    EventBus.$off()
  }

  getStationList () {
    return this.queryList
  }

  setStationData (id: any) {
    console.log(id, this.queryList)
    this.queryList.forEach((item: any) => {
      const ob = {
        address: '贵州市156号',
        carCount: '560辆',
        todayCount: '63501人',
        destination: '桂林、北海、玉林',
        arrive: '桂A96851、桂A21352、桂A21352、桂A21352',
        monitor: ['出站口监控1', '人脸识别监控2']
      }
      if (item.id === id) {
        this.stationData = { ...item, ...ob }
      }
    })
  }
}
</script>

<style lang="scss" scoped>
$level: #ff0000 #f89009 #ffff00;
$length: length($level) + 1;
.passenger-station-map {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
  .map-container-box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 20px;
    overflow: hidden;
  }
  .passenger-station-dialog {
    z-index: 999;
  }
  @each $color in $level {
    $i: index($level, $color);
    .dot-#{$i} {
      width: 0px;
      height: 0px;
      opacity: 0.8;
      animation: dot-#{$i} 3s infinite;
    }
    @keyframes dot-#{$i}{
      0% {
        box-shadow: 0px 0px 0px 0px rgba($color: $color, $alpha: 1);
      }
      50% {
        box-shadow: 0px 0px 20px * ($length - $i) 20px * ($length - $i) rgba($color: $color, $alpha: 1);
      }
      100% {
        box-shadow: 0px 0px 0px 0px rgba($color: $color, $alpha: 1);
      }
    }
  }
}
</style>
